<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>stomp</title>
</head>

<body>
Welcome 聊天室<br/><input id="text" type="text" />
<button onclick="send()">发送消息</button>
<!--注意:多次点击会出现多次订阅情况,消息重复-->
<button onclick="subscribe2()">订阅消息/topic/room/sendTest</button>
<button onclick="subscribe1()">订阅消息/topic/room/subscribeTest</button>
<!--点对点无影响-->
<button onclick="subscribe3()">订阅消息/user/topic/subscribeTest</button>
<!--直接订阅，通过SimpMessagingTemplate发消息-->
<button onclick="subscribe4()">订阅消息/user/{userId}/single_queue</button>
<hr/>
<button onclick="cleanHistoryRecord()">清除历史记录</button>
<button onclick="closeWebSocket()">关闭WebSocket连接(关不掉。)</button>
<hr/>
<div id="message"></div>
</body>

<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script type="text/javascript">
    // 建立连接对象（还未发起连接）
    var socket = new SockJS("http://localhost:8080/webSocketServer");

    // 获取 STOMP 子协议的客户端对象
    var stompClient = Stomp.over(socket);

    // 向服务器发起websocket连接并发送CONNECT帧
    stompClient.connect(
        {},
        function connectCallback(frame) {
            // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
            setMessageInnerHTML("连接成功");
            stompClient.subscribe('/app/room/subscribeTest', function (response) {
                setMessageInnerHTML("已成功订阅/app/room/subscribeTest");
                var returnData = JSON.parse(response.body);
                setMessageInnerHTML("/app/room/subscribeTest 你接收到的消息为:" + returnData.responseMessage);
            });
            // sessionId获取 ws://localhost:8080/webSocketServer/691/szscyffq/websocket
            var url = stompClient.ws._transport.url;
            url = url.replace(
                "ws://localhost:8080/webSocketServer",  "");
            url = url.replace("/websocket", "");
            url = url.replace(/^[0-9]+\//, "");
            console.log("sessionId:"+url);
        },
        function errorCallBack(error) {
            // 连接失败时（服务器响应 ERROR 帧）的回调方法
            setMessageInnerHTML("连接失败");
        }
    );

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        var messageJson = JSON.stringify({ "content": message });
        stompClient.send("/app/room/sendTest", {}, messageJson);
        setMessageInnerHTML("/app/room/sendTest 你发送的消息:" + message);
    }

    //订阅消息
    function subscribe1() {
        stompClient.subscribe('/topic/room/subscribeTest', function (response) {
            setMessageInnerHTML("已成功订阅/topic/room/subscribeTest");
            var returnData = JSON.parse(response.body);
            setMessageInnerHTML("/topic/room/subscribeTest 你接收到的消息为:" + returnData.responseMessage);
        });
    }

    //订阅消息
    function subscribe2() {
        stompClient.subscribe('/topic/room/sendTest', function (response) {
            setMessageInnerHTML("已成功订阅/topic/room/sendTest");
            var returnData = JSON.parse(response.body);
            setMessageInnerHTML("/topic/room/sendTest 你接收到的消息为:" + returnData.responseMessage);
        });
    }

    //订阅消息 点对点
    function subscribe3() {
        stompClient.subscribe('/user/topic/room/subscribeTest', function (response) {
            setMessageInnerHTML("已成功订阅/user/topic/room/subscribeTest");
            var returnData = JSON.parse(response.body);
            setMessageInnerHTML("/user/topic/room/subscribeTest 你接收到的消息为:" + returnData.responseMessage);
        });
    }

    //订阅消息 点对点
    function subscribe4() {
        stompClient.subscribe('/user/queue/single_queue', function (response) {
            setMessageInnerHTML("已成功订阅/user/single_queue");
            var returnData = JSON.parse(response.body);
            setMessageInnerHTML("/user/single_queue 你接收到的消息为:" + returnData.responseMessage);
        });
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //清除历史记录
    function cleanHistoryRecord(){
        document.getElementById('message').innerHTML = '';
    }

    //关闭socket
    function closeWebSocket() {
        //关不掉，没研究了~
        stompClient.close();
    }
</script>

</html>